<template>
    <a-drawer v-model:open="config.visible" @close="closeModel" v-bind="config">
        <template #title>
            <div class="flex justify-between items-center">
                <div>布局设置</div>
            </div>
        </template>
        <div class="w-full p-2 h-full overflow-y-auto" id="configScroll">
            <div class="mt-0">
                <a-divider> <sysIcon type="system-yanse" /> 主题颜色 </a-divider>
                <div class="flex flex-wrap justify-between p-6">
                    <div class="relative mb-3" @click="setThemeColor(item.value)" v-for="(item, index) in state.colorArr" :key="index">
                        <a-tooltip>
                            <template #title>{{ item.title }}</template>
                            <div class="cursor-pointer rounded" :style="'width:50px;height:50px;background:' + item.value"></div>
                        </a-tooltip>
                        <my-icon v-if="store.config.primaryColor === item.value" type="icon-danxuanxuanzhong" class="absolute" style="color: #ffffff; font-weight: 700; font-size: 30px; opacity: 0.85; left: 10px; top: 10px"></my-icon>
                    </div>
                </div>
            </div>

            <div class="pb-0">
                <a-divider> <sysIcon type="system-bujufangshi" /> 网站排版 </a-divider>
                <a-radio-group v-model:value="store.config.plateStyle">
                    <a-row type="flex">
                        <a-col :span="12">
                            <div class="flex justify-center items-center cursor-pointer mb-8">
                                <a-tooltip>
                                    <template #title>简约</template>
                                    <div class="rounded p-2 shadow relative" :style="`width:120px;height:70px;${store.config.plateStyle == 'normal' ? `border:2px solid ${store.config.primaryColor}` : store.config.isDark ? 'border:2px solid #333333;' : 'border:1px solid #f0f0f0;'}`" @click=";(store.config.plateStyle = 'normal'), (state.store.menu.collapsed = false)">
                                        <div class="h-full flex flex-col pl-1">
                                            <div class="w-full bg-gray-300 rounded-sm" :style="`height:30%;background:${store.config.primaryColor};opacity: 0.5;`"></div>
                                            <div class="flex h-full mt-1">
                                                <div class="h-full bg-gray-500 rounded-sm" :style="`width:20%;background:${store.config.primaryColor};`"></div>
                                                <div class="w-full bg-gray-100 rounded-sm ml-1" :style="`border:1px dotted ${store.config.primaryColor};background:${store.config.primaryColor};opacity: 0.2;`"></div>
                                            </div>
                                            <div class="absolute right-0 bottom-0 p-3" style="z-index: 10001; color: #fff" v-if="store.config.plateStyle == 'normal'">
                                                <sysIcon type="system-xuanzhongxuanzhong" :style="`color:${store.config.primaryColor};font-size:20px;`" />
                                            </div>
                                        </div>
                                    </div>
                                </a-tooltip>
                                <p class="text-center mt-2" v-show="false">
                                    <a-radio value="normal">常用模式</a-radio>
                                </p>
                            </div>
                        </a-col>
                        <a-col :span="12">
                            <div class="flex justify-center items-center cursor-pointer mb-8">
                                <a-tooltip>
                                    <template #title>悬浮</template>
                                    <div class="rounded p-2 shadow relative" :style="`width:120px;height:70px;${store.config.plateStyle == 'compact' ? `border:2px solid ${store.config.primaryColor}` : store.config.isDark ? 'border:2px solid #333333;' : 'border:1px solid #f0f0f0;'}`" @click=";(store.config.plateStyle = 'compact'), (state.store.menu.collapsed = true), (state.store.config.menuLock = false)">
                                        <div class="full flex">
                                            <div class="h-full bg-gray-500 rounded-sm" :style="`width:20%;background:${store.config.primaryColor};`"></div>
                                            <div class="h-full flex flex-col pl-1" style="width: 80%">
                                                <div class="w-full bg-gray-300 rounded-sm" :style="`height:20%;background:${store.config.primaryColor};opacity: 0.5;`"></div>
                                                <div class="w-full bg-gray-100 rounded-sm mt-1" :style="`height:80%;border:1px dotted ${store.config.primaryColor};background:${store.config.primaryColor};opacity: 0.2;`"></div>
                                            </div>
                                        </div>
                                        <div class="absolute right-0 bottom-0 p-3" style="z-index: 10001; color: #fff" v-if="store.config.plateStyle == 'compact'">
                                            <sysIcon type="system-xuanzhongxuanzhong" :style="`color:${store.config.primaryColor};font-size:20px;`" />
                                        </div>
                                    </div>
                                </a-tooltip>

                                <p class="text-center mt-2" v-show="false">
                                    <a-radio value="compact">常用模式</a-radio>
                                </p>
                            </div>
                        </a-col>
                        <a-col :span="12">
                            <div class="flex justify-center items-center cursor-pointer mb-8">
                                <a-tooltip>
                                    <template #title>横板</template>
                                    <div class="rounded p-2 shadow relative" :style="`width:120px;height:70px;${store.config.plateStyle == 'topMenu' ? `border:2px solid ${store.config.primaryColor}` : store.config.isDark ? 'border:2px solid #333333;' : 'border:1px solid #f0f0f0;'}`" @click="store.config.plateStyle = 'topMenu'">
                                        <div class="h-full flex flex-col pl-1">
                                            <div class="w-full bg-gray-300 rounded-sm" :style="`height:30%;background:${store.config.primaryColor};`"></div>
                                            <div class="flex h-full mt-1">
                                                <div class="w-full bg-gray-100 rounded-sm" :style="`border:1px dotted ${store.config.primaryColor};background:${store.config.primaryColor};opacity: 0.2;`"></div>
                                            </div>
                                        </div>
                                        <div class="absolute right-0 bottom-0 p-3" style="z-index: 10001; color: #fff" v-if="store.config.plateStyle == 'topMenu'">
                                            <sysIcon type="system-xuanzhongxuanzhong" :style="`color:${store.config.primaryColor};font-size:20px;`" />
                                        </div>
                                    </div>
                                </a-tooltip>

                                <p class="text-center mt-2" v-show="false">
                                    <a-radio value="topMenu">横板</a-radio>
                                </p>
                            </div>
                        </a-col>
                        <a-col :span="12">
                            <div class="flex justify-center items-center cursor-pointer">
                                <a-tooltip>
                                    <template #title>拆分</template>
                                    <div class="rounded p-2 shadow relative" :style="`width:120px;height:70px;${store.config.plateStyle == 'position' ? `border:2px solid ${store.config.primaryColor}` : store.config.isDark ? 'border:2px solid #333333;' : 'border:1px solid #f0f0f0;'}`" @click=";(store.config.plateStyle = 'position'), (state.store.menu.collapsed = false)">
                                        <div class="h-full flex flex-col pl-1">
                                            <div class="w-full bg-gray-300 rounded-sm" :style="`height:30%;background:${store.config.primaryColor};opacity: 1;`"></div>
                                            <div class="flex h-full mt-1">
                                                <div class="h-full bg-gray-500 rounded-sm" :style="`width:20%;background:${store.config.primaryColor};`"></div>
                                                <div class="w-full bg-gray-100 rounded-sm ml-1" :style="`border:1px dotted ${store.config.primaryColor};background:${store.config.primaryColor};opacity: 0.2;`"></div>
                                            </div>
                                            <div class="absolute right-0 bottom-0 p-3" style="z-index: 10001; color: #fff" v-if="store.config.plateStyle == 'position'">
                                                <sysIcon type="system-xuanzhongxuanzhong" :style="`color:${store.config.primaryColor};font-size:20px;`" />
                                            </div>
                                        </div>
                                    </div>
                                </a-tooltip>
                                <p class="text-center mt-2" v-show="false">
                                    <a-radio value="position">拆分</a-radio>
                                </p>
                            </div>
                        </a-col>
                    </a-row>
                </a-radio-group>
            </div>

            <div class="mt-4">
                <a-divider> <sysIcon type="system-shezhi" /> 其他设置 </a-divider>
                <div class="p-4 flex justify-between items-center">
                    <a-typography-text>导航主题</a-typography-text>
                    <a-radio-group :disabled="state.store.config.isDark" button-style="solid" v-model:value="store.config.menuTheme">
                        <a-radio-button value="normal" @click="store.config.menuTheme = 'normal'">浅色</a-radio-button>
                        <a-radio-button value="dark" @click="store.config.menuTheme = 'dark'">深色</a-radio-button>
                    </a-radio-group>
                </div>
                <div class="p-4 flex justify-between items-center">
                    <a-typography-text>多页签</a-typography-text>
                    <a-switch v-model:checked="store.config.showTabs" checked-children="显示" un-checked-children="关闭" />
                </div>
                <div class="p-4 flex justify-between items-center">
                    <a-typography-text>菜单地图</a-typography-text>
                    <a-switch v-model:checked="store.config.showBreadcrumb" checked-children="显示" un-checked-children="关闭" />
                </div>
                <div class="p-4 flex justify-between items-center">
                    <a-typography-text>紧凑风格</a-typography-text>
                    <a-switch v-model:checked="store.config.compact" @change="setCompact" checked-children="开启" un-checked-children="关闭" />
                </div>
                <div class="p-4 flex justify-between items-center">
                    <a-typography-text>页面切换动画</a-typography-text>
                    <d-select v-model:value="store.config.routerAnimate" style="width: 160px" :options="state.optionsData"></d-select>
                </div>
            </div>
        </div>
    </a-drawer>
</template>
<script setup>
const state = reactive({
    config: XEUtils.clone(drawerConfig, true),
    store: useStore(),
    colorArr: [
        { value: '#1890ff', title: '拂晓蓝（默认）' },
        { value: '#f5222d', title: '薄暮' },
        { value: '#fa541c', title: '火山' },
        { value: '#faad14', title: '日暮' },
        { value: '#990066', title: '朱红' },
        { value: '#13c2c2', title: '明青' },
        { value: '#52c41a', title: '极光绿' },
        { value: '#2f54eb', title: '极客蓝' },
        { value: '#722ed1', title: '酱紫' },
        { value: '#009688', title: '夜幕' },
    ],
    optionsData: [
        { label: 'animate__fadeIn', value: 'animate__fadeIn' },
        { label: 'animate__fadeInLeft', value: 'animate__fadeInLeft' },
        { label: 'animate__fadeInDown', value: 'animate__fadeInDown' },
        { label: 'animate__backInLeft', value: 'animate__backInLeft' },
        { label: 'animate__zoomIn', value: 'animate__zoomIn' },
        { label: 'animate__rotateIn', value: 'animate__rotateIn' },
        { label: 'animate__pulse', value: 'animate__pulse' },
        { label: 'animate__rubberBand', value: 'animate__rubberBand' },
        { label: 'animate__headShake', value: 'animate__headShake' },
        { label: 'animate__fadeInTopLeft', value: 'animate__fadeInTopLeft' },
        { label: 'animate__fadeInTopRight', value: 'animate__fadeInTopRight' },
        { label: 'animate__flipInX', value: 'animate__flipInX' },
        { label: 'animate__flipInY', value: 'animate__flipInY' },
        { label: 'animate__lightSpeedInLeft', value: 'animate__lightSpeedInLeft' },
        { label: 'animate__lightSpeedInRight', value: 'animate__lightSpeedInRight' },
        { label: 'animate__rotateInDownLeft', value: 'animate__rotateInDownLeft' },
        { label: 'animate__rotateInDownRight', value: 'animate__rotateInDownRight' },
        { label: 'animate__jackInTheBox', value: 'animate__jackInTheBox' },
        { label: 'animate__rollIn', value: 'animate__rollIn' },
    ],
})

// ==============初始化=================
state.config.width = 360

//设置主题颜色
const setThemeColor = color => {
    state.store.config.primaryColor = color
    const root = document.documentElement
    root.style.setProperty('--ant-primary-color', color)
}

function setCompact(value) {
    state.store.table.tableConfig.size = value
    closeModel()
}

// ==============组件方法=================
const openModel = (type, data) => {
    state.config.visible = true
}
const closeModel = () => {
    state.config.visible = false
    state.store.model.themeShow = false
}
defineExpose({
    openModel,
    closeModel,
})
const { config, store } = toRefs(state)
</script>
